import { useNavigate } from 'react-router-dom';
import Header from '../../../compoennts/studentAbsent/Header';
import AbsentTable from '../../../compoennts/studentAbsent/AbsentTable';
import { Button, Drawer, Input, Radio, Space } from 'antd'
import { FileAddOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react';
import services from '../../../services';
import { message } from 'antd';

function VoteManage(props) {
    const [data, setData] = useState([]);
    const [open, setOpen] = useState(false);
    const [viewData, setViewData] = useState({});
    const [voteRadioValue, setVoteRadioValue] = useState(0);
    const navigator = useNavigate();

    const columns = [
        {
            title: '序号',
            width: 70,
            dataIndex: 'id',
            key: 'id',
            align: 'center'
        },
        {
            title: '标题',
            width: 300,
            dataIndex: 'title',
            key: 'title',
            align: 'center',
            render: (text, record) => <a className='link_blue underline' onClick={() => handleViewVote(record)} >{text}</a>
        },
        {
            title: '状态',
            width: 180,
            dataIndex: 'state',
            key: 'state',
            align: 'center',
            render: (state) => {
                if (state === 1) {
                    return <span style={{ color: 'rgb(30,198,149)' }}>进行中</span>
                } else {
                    return <span style={{ color: '#ccc' }}>已结束</span>

                }
            }
        },
        {
            title: '发送范围',
            width: 150,
            dataIndex: 'scope',
            key: 'scope',
            align: 'center',
        },
        {
            title: '参与对象',
            width: 120,
            dataIndex: 'object',
            key: 'object',
            align: 'center'
        },
        {
            title: '发布者',
            width: 120,
            dataIndex: 'Publisher',
            key: 'Publisher',
            align: 'center'
        },
        {
            title: '发送时间',
            width: 170,
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            render: (text) => { return new Date(text).toLocaleString() }
        },
        {
            title: '操作',
            width: 120,
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',
            render: (_, { id }) => {
                return <a className='link_blue' onClick={() => handleDelteVote(id)}>删除</a>
            }
        },



    ]
    //获取投票列表
    const getVoteList = async () => {
        let result = await services.voteService.getAllVote()
        setData(result.data)
        console.log(result)
    }

    useEffect(() => {
        getVoteList()
    }, [JSON.stringify(data)])


    const handleVote = () => {
        navigator('/voteInput')
    }

    function handleViewVote(record) {
        console.log(record)
        setOpen(true)
        setViewData(record)
    }

    const onClose = () => {
        setOpen(false)
    }

    const handleChange = (e) => {
        setVoteRadioValue(e.target.value)
    }

    const handleVoteSubmit = async (id, state) => {
        let result = await services.voteService.updateVoteState(id, state)
        if (result.code === 200) {
            message.success('提交成功')
            onClose()
        } else {
            message.error('提交失败')
        }
    }

    // 删除投票
    const handleDelteVote = async (id) => {
        let result = await services.voteService.deleteVoteById(id)
        if (result.code === 200) {
            getVoteList()
            message.success("删除成功")
        } else {
            message.success("删除失败")
        }
    }

    return (
        <div>
            <Header>
                <div style={{ display: 'flex' }}>
                    快速搜索：
                    <div>
                        <Input placeholder="请输入标题或发布者" />
                    </div>
                </div>
            </Header>
            <AbsentTable columns={columns} data={data} rowKey={record => record.id} >
                <Button type='primary' onClick={handleVote}><FileAddOutlined />发起投票</Button>
            </AbsentTable>
            {/* 投票抽屉 */}
            <Drawer title="投票" open={open} onClose={onClose} closable={false} width={600} className="drawer">
                <h3>{viewData.title}</h3>
                <p>杨老师    2022年05月01日 09:00</p>
                <p>截止日期：2022年05月02日  09:00</p>
                <p>投票说明：近期，老师发现班上不少同学们对看书很感兴趣。因此老师考虑举办一个”每天看书半小时“的活动，让孩子们慢慢培养看书的习惯和增强探索知识的兴趣，现由家长们投票决定是否同意举办此活动，看书的时间是每天下午放学后半小时。</p>
                <p>投票类型：单选</p>
                <p>参与对象：老师</p>
                <p>参与范围：教务处、教研组</p>
                <div className='voteOptionArea'>
                    <p>【单选】投票选项</p>
                    <Radio.Group onChange={handleChange} value={voteRadioValue} style={{ marginLeft: '30px' }}>
                        <Space direction='vertical' size={25}>
                            <Radio value={0}>同意</Radio>
                            <Radio value={1}>不同意</Radio>
                        </Space>
                    </Radio.Group>
                </div>
                <Button style={{ backgroundColor: 'rgb(75,209,170)', color: '#fff' }} onClick={() => handleVoteSubmit(viewData.id, voteRadioValue)}>提交</Button>
                <Button onClick={onClose}>取消</Button>
            </Drawer>
        </div>
    );
}

export default VoteManage;